<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>A game!</title>
</head>
<body>
    <script src="./pixi.min.js"></script>
    <script src="functions.js"></script>
    <script>
        
        //Aliases
        let Application = PIXI.Application,
            ontainer = PIXI.Container,
            loader = PIXI.loader,
            resources = PIXI.loader.resources,
            TextureCache = PIXI.utils.TextureCache,
            Sprite = PIXI.Sprite,
            Rectangle = PIXI.Rectangle,
            TextStyle = PIXI.TextStyle,
            Text = PIXI.Text;
            

        //Create a Pixi Application
        let app = new Application({
            width: 512,
            height: 512,
            antialiasing: true, 
            transparent: false, 
            resolution: 1
        });
        document.body.appendChild(app.view);
        
        //To change the background color
        app.renderer.backgroundColor = 0x061639;

        // Load picture
        loader
            .add("images/treasureHunter.json")
            .load(setup);

        let treasure, explorer, state, id;
        let collision = undefined;

        function setup(){
            //3. Create an optional alias called `id` for all the texture atlas 
            //frame id textures.
            id = PIXI.loader.resources["images/treasureHunter.json"].textures;
            //Make the treasure box using the alias
            treasure = new Sprite(id["treasure.png"]);
            // Change the sprite's position
            treasure.x = 200;
            treasure.y = 0;
            treasure.vx = 0;
            treasure.vy = 5;
            
            // Add the explorer to the stage
            app.stage.addChild(treasure);

            explorer = new Sprite(id["explorer.png"]);
            explorer.x = 200;
            explorer.y = 400;
            explorer.vx = 0;
            explorer.vy = 0;

            app.stage.addChild(explorer);



            // Capture the keyboard arrow keys
            let left = keyboard(37),
                up = keyboard(38),
                right = keyboard(39),
                down = keyboard(40);
            
            // Left press and release
            left.press = () => {
                explorer.vx = -5;
                explorer.vy = 0;
            };

            left.release = () => {
                if(!right.isDown && explorer.vy === 0) {
                    explorer.vx = 0;
                }
            };

            //Up
            up.press = () => {
                explorer.vy = -5;
                explorer.vx = 0;
            };
            up.release = () => {
                if(!down.isDown && explorer.vx === 0) {
                    explorer.vy = 0;
                }
            };

            //right
            right.press = () => {
                explorer.vx = 5;
                explorer.vy = 0;
            };

            right.release = () => {
                if(!left.isDown && explorer.vy === 0) {
                    explorer.vx = 0;
                }
            };

            //Down
            down.press = () => {
                explorer.vy = 5;
                explorer.vx = 0;
            };
            down.release = () => {
                if(!up.isDown && explorer.vx === 0) {
                    explorer.vy = 0;
                }
            };

            // Set game state
            state = play;

            // Start the game loop by adding the `gameLoop` function to
            // Pixi's `ticker` and providing it with a `delta` argument.
            app.ticker.add(delta => gameLoop(delta));


        };
    
        function gameLoop(delta){
            if(treasure.y>512){
                treasure.y = 0;
                treasure.x = Math.round(Math.random()*512);
            }
            if (collision){
                state = stop;
            }
            // Update the current game state:            
            state(delta);
            
        }

        function play(delta) {
            explorer.x += explorer.vx;
            //explorer.y += explorer.vy;
            treasure.y += treasure.vy;
            if (hitTestRectangle(explorer, treasure)) {
                collision = true;
            };

        }

        function stop(delta) {
            let style = new TextStyle({
                fontFamily: "Futura",
                fontSize: 64,
                fill: "white"
            });
            message = new Text("You get it!", style);
            message.x = 120;
            message.y = app.stage.height / 2 - 32;
            app.stage.addChild(message);
        }
    
    </script>
</body>
</html>